
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-webkit-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-moz-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto 0;
        }

        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .word {
            font-weight: 700;
        }

        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink .7s infinite;
            -moz-animation: blink .7s infinite;
            animation: blink .7s infinite;
            display: none;
        }

        .saySection {
            margin-top: 50px;
        }

        .saySection input {
          font-size:30px;
        }

        .saySection .txtSay {
            width: 400px;
            height: 40px;
            font-size: 16px;
            padding-left: 10px;
        }

        .saySection .btnSay {
            display: inline-block;
            vertical-align:bottom;
            padding: 4px 20px;
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //页面加载的时候每隔固定时间，在.wrod中添加字符
        //点击say按钮，上面的input中的内容，每隔固定时间，.word中添加一个字符，插入的就是input中的内容
        jQuery(function(){
            var str1="今天也是美美的一天呢";
            var timer=null;
            $(".typed-cursor").show();
            sendContent(str1);
            $("#btnSay").click(function(){
                str1=$("#inValue").val();
                sendContent(str1);
                $("#inValue").val("");
            })
            //内容发送计时器封装
            function sendContent(str){
                var arr=str.split("");
                var str2="";
                var num=0;
                timer=setInterval(function(){
                    str2+=arr[num];
                    $(".word").text(str2);
                    num++;
                    if(num===arr.length){
                        clearInterval(timer);
                        $(".typed-cursor").hide();
                    }
                },200);
            }
        });
    </script>
</head>
<body>
<div class="wrap">
    <h1>
        You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
    </h1>
    <div class="saySection">
        <input type="text" id="inValue" class="txtSay"/>
        <input type="button" value="Say" id="btnSay" class="btnSay"/>
    </div>
</div>
</body>
</html>
